<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读清单</title>
    <link href="styles.css" rel="stylesheet" />
    <!-- 引入 Vue 3 核心库（CDN） -->
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app" class="wrapper">
        <header>
            <div id="page-banner">
                <h1 class="title">阅读清单</h1>
                <p>清单里收纳着全部未来的相遇</p>
                <form id="search-books">
                    <input type="text" 
                        v-model.trim="searchBookTitle"
                        @keyup="searchInputHandle"
                        placeholder="搜索书籍..." />
                </form>
            </div>
        </header>
        <div id="book-list">
            <h2 class="title">待读书籍</h2>
            <ul v-if="!hideAllBooks">
                <li v-for="book in searchBooks">
                    <span class="name">{{ book.title }}</span>
                    <span class="delete" @click="deleteBook(book.id)">删除</span>
                </li>
            </ul>
        </div>
        <form id="add-book" @submit.prevent="addBook(newBookTitle)">
            <input type="checkbox" v-model="hideAllBooks" id="hide" />
            <label for="hide">隐藏所有书籍</label>
            <input type="text" v-model.trim="newBookTitle" placeholder="添加书籍..." />
            <button>添加</button>
        </form>
        <footer>
            <ul class="tabs">
                <li :class="{ active: activeTab === tab.id }"
                    @click="activeTab = tab.id"
                    v-for="tab in tabs" 
                    :key="tab.id">
                    {{ tab.title }}
                </li>
            </ul>
            <div class="panel" 
                :class="{ active: activeTab === tab.id }"
                v-for="tab in tabs" 
                :key="tab.id"
                v-show="activeTab === tab.id"
                v-html="tab.content">
            </div>
        </footer>
    </div>
    <script src="app.js"></script>
    <script>
  
    </script>
</body>

</html>